<template>
  <div
    v-if="isVisible"
    class="absolute w-screen h-screen top-0 left-0 z-[9999999] flex flex-col items-center justify-center bg-white"
    @click="handleClose"
  >
    <img
      :src="props.imgSrc || weatherImg"
      class="w-full h-full object-cover absolute top-0 left-0"
    />
    <button
      @click="handleClose"
      class="relative z-10 mt-8 w-14 h-14 flex items-center justify-center rounded-full bg-white/70 backdrop-blur-md shadow-lg border border-blue-200 hover:bg-blue-100/80 transition-all duration-200"
      aria-label="进入"
    >
      <svg
        class="w-8 h-8 text-blue-400 animate-bounce"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import weatherImg from "@/assets/weather.jpg";
const props = defineProps(["imgSrc"]);
const isVisible = ref(true);

const handleClose = () => {
  isVisible.value = false;
};
onMounted(() => {
  setTimeout(() => {
    handleClose();
  }, 5 * 1000);
});
</script>

<style scoped></style>
